<template>
    <n-layout embedded content-style="padding: 24px;">
    <n-card>
        <n-form
            ref="formRef"
            :label-width="80"
            :model="scenario"
            :rules="rules"
            :size="size"
        >
            <n-form-item label="想定名称" path="scenarioName">
            <n-input v-model:value="scenario.scenarioName" placeholder="输入想定名称"/>
            </n-form-item>
            <n-form-item label="想定模式" path="decisionMaking">
                <n-radio-group v-model:value="scenario.decisionMaking" name="decisionMaking">
                <n-space>
                    <n-radio value="rehearsal">
                    预演
                    </n-radio>
                    <n-radio value="simulation">
                    推演
                    </n-radio>
                </n-space>
                </n-radio-group>
            </n-form-item>
            <n-form-item label="想定描述" path="user.age">
                <n-input placeholder="输入想定描述......"
                v-model:value="scenario.scenarioDescription"
                type="textarea"
                />
            </n-form-item>
        </n-form>
    </n-card>
  </n-layout>
</template>
<script>
import { NButton, NCard, NLayoutFooter,NForm,NFormItem ,NInput, NRadioGroup, NRadio, NSpace, NLayout} from 'naive-ui';
import { ref,getCurrentInstance} from "vue";

export default {
    components: {
        NCard,NButton, NLayoutFooter,NForm,NFormItem,NInput,NRadioGroup,NRadio,NSpace,NLayout
    },
    props: {
        scenario:{
            type: Object
        }
    },
    setup() {
        const { proxy } = getCurrentInstance();
        return {
            size:"large",
            scenario:ref(proxy.scenario),
            // localValue:ref("rehearsal"),
            rules:{
                scenarioName:{   
                    required: true,
                    message: "请输入想定名称",
                    trigger: "blur"   
                },
                decisionMaking: {
                required: true,
                trigger: "change",
                message: "请选择推演模式"
                // validator:(rv,v)=>{
                //     console.log(rv+" ----"+ v);
                    
                //     return true;
                // }
                }    
            }
        }
    },
}
</script>